mixin flex-tab({imgs, bg})
  -var bgStyle = {style: `display: inline-block; vertical-align: top; background-position: 0 0;background-repeat: no-repeat; background-size: 100% 100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;`}
  -var bgUrl = bg || bg==0 ? images[0].url : ''
  section(style=`line-height: 0;background-image: url(${bgUrl});`)
    //- 抵消touchstart事件
    section(style='height: 0;transform: scale(1);')
        svg(viewBox=`0 0 ${imgs.length * 400} 400` width='100%' opacity='0' style='isolation: isolate;transform: translateZ(1px);pointer-events: none;')
          g
            each idx in imgs
              rect(x=`${idx * 400}` y='0' fill='#000' width='400' height='400' pointer-events='visible')
                set(attributeName='visibility' from='visible' to='hidden' begin='touchstart' dur='0.25s' fill='remove' restart='always')

    section(style='display: flex;width: 100%;')
      each idx in imgs
        -var {url, width, height} = images[idx]
        section(style=`line-height: 0; background-image="${bgUrl}"`)&attributes(bgStyle)
          section(style='height: 0;')
              //- 放大状态显示的图片
              svg&attributes(bgStyle)(style=`background-image: url(${url});width: 100%!important;` viewBox=`0 0 ${width} ${height}` x='0' y='0')
          svg&attributes(bgStyle)(width='100%' viewBox='0 0 400 400' style='margin-bottom: -1px;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;max-width: 100% !important;min-width: 100% !important;')
              g(style='pointer-events: none;' )
                  //- 缩小状态显示的图片
                  foreignobject(opacity='1' width='100%' height='100%')
                      svg&attributes(bgStyle)(style=`background-image: url(${url});-webkit-tap-highlight-color: transparent;user-select: none;max-width: 100% !important;min-width: 100% !important;pointer-events: none;` viewBox='0 0 400 400' width='100%')
                  g(opacity='0' style='pointer-events: none;' transform='translate(0 0)')
                      //- 接收click事件，向左移动svg的宽度
                      animateTransform(attributeName='transform' type='translate' values='-800 0;-400 0;-400 0' begin='click' dur='999s' restart='always' fill='remove' keyTimes='0;0.001;1')
                      //- 接收touchstart事件，向右移动svg的宽度
                      animateTransform(attributeName='transform' type='translate' values='-800 0;0 0;0 0' begin='touchstart+0.3s' dur='999s' restart='always' fill='remove' keyTimes='0;0.001;1')
                      g(style='opacity: 0.5;')
                          animateTransform(attributeName='transform' type='translate' values='0 9999;0 9999;' begin='touchstart' dur='1s' restart='always' fill='remove')
                          rect( x='0' y='0' width='100%' height='100%' style='pointer-events: visible;')
                              set(attributeName='visibility' from='visible' to='hidden' begin='click' dur='1.2s' fill='remove' restart='always')
                          rect( x='100%' y='34%' width='100%' height='100%' style='pointer-events: visible;' fill='#000000')
                              animateTransform(attributeName='transform' type='translate' values='9999 -9999;9999 -9999' begin='touchstart' dur='1.2s' fill='remove' restart='always' calcMode='discrete')
              //- 接收click事件，透明度隐藏
              animate(fill='freeze' dur='999s' attributeName='opacity' begin='click' restart='always' values='1;0;0' keyTimes='0;0.0003;1')
              //- 接收touchstart事件，透明度
              animate(fill='freeze' dur='999s' attributeName='opacity' begin='touchstart+0.3s' restart='always' values='0;1;1' keyTimes='0;0.0005;1')
              //- 接收click事件，宽度变大
              animate(attributeName='width' fill='remove' restart='always' calcMode='spline' keySplines='1 0 1 0;0.12 0 0.88 1.0' keyTimes='0;0.001;1' values='0;999999;999999' dur='999s' begin='click' attributeType='CSS')
              //- 接收touchstart事件，宽度变为100%
              animate(attributeName='width' fill='remove' restart='always' calcMode='spline' keySplines='0 1 0 1; 0 1 0 1; 0.62 0 0.38 1.0' keyTimes='0;0.0001;0.0008;1' values='999999;999999;0;100%' dur='999s' begin='touchstart+0.3s' attributeType='CSS')

// mixin flex-tab({imgs, bg})
  -var bgStyle = {style: `display: inline-block; vertical-align: top; background-position: 0 0;background-repeat: no-repeat; background-size: 100% 100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;`}
  -var tabWidth = 0
  -var tabHeight = 0
  -var {width, height} = images[0]
  -var bgUrl = bg || bg==0 ? images[0].url : ''
  each idx in imgs
    -tabHeight=(tabHeight > images[idx].height ? tabHeight : images[idx].height) / imgs.length
    -console.log(idx, tabHeight, width, bgUrl, '[flex-tab.pug]')
  // 整体背景可以插入图片
  section(style=`line-height: 0; background-image: url(${bgUrl});` )&attributes(bgStyle)
    //- 抵消touchstart事件
    section(style='height: 0;transform: scale(1);')
        svg(viewBox=`0 0 ${imgs.length * 400} ${tabHeight}` width='100%' opacity='0' style='isolation: isolate;transform: translateZ(1px);pointer-events: none;')
          g
            each idx in imgs
              rect(x=`${idx * 400}` y='0' fill='#000' width='400' height=tabHeight pointer-events='visible')
                set(attributeName='visibility' from='visible' to='hidden' begin='touchstart' dur='0.25s' fill='remove' restart='always')

    section(style='display: flex;width: 100%;')
      each idx in imgs
        -var {url, width, height} = images[idx]
        section(style='line-height: 0;')
          section(style='height: 0;')
              //- 放大状态显示的图片
              svg&attributes(bgStyle)(style=`background-image: url(${url});width: 100%!important;` viewBox=`0 0 ${width} ${height}` x='0' y='0')
          svg&attributes(bgStyle)(width='100%' viewBox=`0 0 400 ${tabHeight}` 
          style=`margin-bottom: -1px;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;max-width: 100% !important;min-width: 100% !important;`)
              g(style='pointer-events: none;' )
                  //- 缩小状态显示的图片
                  foreignobject(opacity='1' width='100%' height='100%')
                      svg&attributes(bgStyle)(style=`background-image: url(${url});-webkit-tap-highlight-color: transparent;user-select: none;max-width: 100% !important;min-width: 100% !important;pointer-events: none;` viewBox='0 0 400 400' width='100%')
                  g(opacity='0' style='pointer-events: none;' transform='translate(0 0)')
                      //- 接收click事件，向左移动svg的宽度
                      animateTransform(attributeName='transform' type='translate' values='-800 0;-400 0;-400 0' begin='click' dur='999s' restart='always' fill='remove' keyTimes='0;0.001;1')
                      //- 接收touchstart事件，向右移动svg的宽度
                      animateTransform(attributeName='transform' type='translate' values='-800 0;0 0;0 0' begin='touchstart+0.3s' dur='999s' restart='always' fill='remove' keyTimes='0;0.001;1')
                      g(style='opacity: 0.5;')
                          animateTransform(attributeName='transform' type='translate' values='0 9999;0 9999;' begin='touchstart' dur='1s' restart='always' fill='remove')
                          rect( x='0' y='0' width='100%' height='100%' style='pointer-events: visible;')
                              set(attributeName='visibility' from='visible' to='hidden' begin='click' dur='1.2s' fill='remove' restart='always')
                          rect( x='100%' y='34%' width='100%' height='100%' style='pointer-events: visible;' fill='#000000')
                              animateTransform(attributeName='transform' type='translate' values='9999 -9999;9999 -9999' begin='touchstart' dur='1.2s' fill='remove' restart='always' calcMode='discrete')
              //- 接收click事件，透明度隐藏
              animate(fill='freeze' dur='999s' attributeName='opacity' begin='click' restart='always' values='1;0;0' keyTimes='0;0.0003;1')
              //- 接收touchstart事件，透明度
              animate(fill='freeze' dur='999s' attributeName='opacity' begin='touchstart+0.3s' restart='always' values='0;1;1' keyTimes='0;0.0005;1')
              //- 接收click事件，宽度变大
              animate(attributeName='width' fill='remove' restart='always' calcMode='spline' keySplines='1 0 1 0;0.12 0 0.88 1.0' keyTimes='0;0.001;1' values='0;999999;999999' dur='999s' begin='click' attributeType='CSS')
              //- 接收touchstart事件，宽度变为100%
              animate(attributeName='width' fill='remove' restart='always' calcMode='spline' keySplines='0 1 0 1; 0 1 0 1; 0.62 0 0.38 1.0' keyTimes='0;0.0001;0.0008;1' values='999999;999999;0;100%' dur='999s' begin='touchstart+0.3s' attributeType='CSS')
